---
description: Компонент, который представляет собой элемент, содержащий текстовую информацию, с возможностью удаления.
---

<Overview group="data-display">

# Chip [tag:component]

Компонент, который представляет собой элемент, содержащий текстовую информацию, с возможностью удаления.
Чаще всего используется внутри компонентов [`ChipsInput`](/components/chips-input) и [`ChipsSelect`](/components/chips-select) для
отображения выбранных значений.

</Overview>

<Playground>
  ```jsx
  <Chip onRemove={() => alert('Обработчик удаления')}>Drummatix</Chip>
  ```
</Playground>

## Режимы отображения

Задаётся свойством `mode`.

- `"primary"` — основной режим. Используется для стандартного отображения элементов;
- `"secondary"` — второстепенный режим со сниженной контрастностью. Используется для менее важной информации, или когда нужно визуально отделить её от фона.

## Доступность (a11y) [#a11y]

Компонент обеспечивает базовую доступность, устанавливая HTML-атрибуты `aria-readonly` и `aria-disabled`
для `readOnly` и `disabled` состояний компонента соответственно.

При использовании кнопки удаления, текст для скринридера формируется автоматически из текста, переданного в `removeLabel` и
текста, переданного в свойство `children`.

## Свойства и методы [#api]

<PropsTable name="ChipsInputBase/Chip/Chip" />
